<template>
  <div class="w">
    <mall-shelf title="支付成功" style="text-align: center">
      <div slot="content" class="content">
        <p><i class="el-icon-circle-check icon-success" /> 恭喜您支付成功，请等待5-30分钟系统确认<br>总共花费 <span class="price"><em style="font-size: 18px">¥</em>{{ price }}</span> 元</p>
        <div style="margin-top: 20px;">
          <router-link to="/user">
            <mall-button text="查看订单" style="width: 150px;height: 50px;line-height: 48px;font-size: 20px" class-style="main-btn" />
          </router-link>
          <router-link to="/home">
            <mall-button text="继续选购" style="width: 150px;height: 50px;line-height: 48px;font-size: 20px" class-style="main-btn" />
          </router-link>
        </div>
      </div>
    </mall-shelf>
  </div>
</template>

<script>
import MallShelf from '@/components/MallShelf'
import MallButton from '@/components/MallButton'

export default {
  components: {
    MallShelf,
    MallButton
  },
  data() {
    return {
      price: 10
    }
  },
  created() {
    this.price = this.$route.query.price
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 150px 0;
  font-size: 30px;
}

.icon-success {
  font-size: 33px;
  color: #01b401;
}

span.price {
  color: #d44d44;
  font-weight: 700;
  line-height: 20px;
  text-align: right;
}
</style>
